<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">预定记录</block>
		</cu-custom>
	<!-- <simple-datetime-picker  @submit="onConfirm"></simple-datetime-picker> -->
	<!-- 卡片 -->
			<view v-for="(item,index) in reserveList" :key="index">
				<div class="hm-sms-list-card">
				  <div class="box">
				    <!-- <image class="xueshengdangan" :src="options.xueshengdangan" />
				    <image class="primary" :src="options.primary" /> -->
				    <div class="sub">
				      <div class="outer">
				        <div class="wrap">
				          <text class="paybak">工作室编号：{{ item.syhClassroomNumber }}</text>
				        </div>
						
				        <text class="txt" v-if="item.syhReserveStatus==2" style="color: #909399;">当前状态：预定结束</text>
				        <text class="txt" v-if="item.syhReserveStatus==1" style="color: #67C23A;">当前状态：预定成功</text>
				        <text class="txt" v-if="item.syhReserveStatus==0" style="color: #F56C6C;">当前状态：预定失败</text>
<!-- 				        <text class="txt">当前状态：{{ item.syhReserveStatus }}</text> -->
				      </div>
					  <div class="wrap">
						<text class="company">工位名称：{{ item.syhSitName }}</text>
					    <!-- <text class="company">{{ options.company }}</text> -->
					  </div>
					  
				      <div class="block">
						  <text class="desc">预定时间: </text>
						  <text class="desc" style="float: right;margin-right: 20%; width: 60%;text-align: right; color: #b3c0ce;">
							  {{ item.syhReserveStartTime }}---{{ item.syhReserveEndTime }}
						  </text>
						
				      </div>
					  
				    </div>
					  
				    
				  </div>
				</div>
			</view>
	</view>
</template>

<script>
	import HmSmsListCard from '@/components/hm-sms-list-card/index.vue';
	// import simpleDatetimePicker from "@/components/biiliwuiid-datatime-picker/biiliwuiid-datatime-picker.vue";
export default {
		components:{HmSmsListCard},
		data() {
			
			return {
				reserveList:[],
				queryReserveByUserId:'/reserve/queryReserveByUserId',
				syhUserId:null,
				// machine:'',	//机器表id
				// machineList:[],
				// queryClassroomAbleSits:'/classroom/queryClassroomAbleSits',
				// side:
				//   '/static/hm-sms-list-card/images/img_25832_0_0.png',
			};
		},watch: {
			cur: {
				immediate: true,
				handler() {
					console.log('watch',this.cur)
				    this.load()
				},
			},
		},
		methods: {
			load(){

				
			},
			
		},
		mounted() {
			const userStorage=uni.getStorageSync("login_user_info")
							console.log("直接获取存储id",userStorage)
							console.log("useridStorage",userStorage.syhUserId)
							this.syhUserId=userStorage.syhUserId
			this.$http.get('/reserve/queryReserveByUserId?syhUserId='+this.syhUserId).then(res=>{
				console.log("res",res)
				 if (res.data.success) {
					let perArr = res.data.data.result;
					console.log("perArr",perArr);
					this.reserveList=perArr


				}
			}).catch(err => {
				console.log(err);
			});	
		},
}
</script>

<style>
	.hm-sms-list-card {
	  display: flex;
	  align-items: center;
	  flex-direction: row;
	  width: 750rpx;
	  height: 220rpx;
	}
	
	.box {
	  display: flex;
	  position: relative;
	  align-items: flex-start;
	  flex-direction: row;
	  justify-content: center;
	  margin-left: 16.1rpx;
	  border-radius: 32.21rpx;
	  background-color: #ffffff;
	  width: 750rpx;
	  height: 200rpx;
	  overflow: hidden;
	}
	
	.xueshengdangan {
	  position: absolute;
	  top: 66.72rpx;
	  left: 69.02rpx;
	  width: 82.82rpx;
	  height: 110.43rpx;
	}
	
	.primary {
	  position: relative;
	  margin-top: 46.01rpx;
	  margin-right: 34.51rpx;
	  width: 128.83rpx;
	  height: 115.03rpx;
	}
	
	.sub {
	  display: flex;
	  position: relative;
	  align-items: flex-start;
	  flex-direction: column;
	  margin-top: 36.81rpx;
	  margin-right: 10rpx;
	  height: 100rpx;
	  width: 90%;
	}
	
	.outer {
	  display: flex;
	  position: relative;
	  align-items: left;
	  flex-direction: row;
	  justify-content: space-between;
	  width: 100%;
	  height: 50.61rpx;
	}
	
	.wrap {
	  display: flex;
	  align-items: left;
	  flex-direction: row;
	  height: 46.01rpx;
	}
	
	.paybak {
	  opacity: 1;
	  max-width: 100%;
	  height: 46.01rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  line-height: 46.01rpx;
	  white-space: pre;
	  color: #34c1fe;
	  font-family: Helvetica;
	  font-size: 28rpx;
	  font-weight: normal;
	}
	
	.company {
	  opacity: 1;
	  /* max-width: 80.52rpx; */
	  height: 46.01rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  line-height: 46.01rpx;
	  white-space: nowrap;
	  color: #34c1fe;
	  font-size: 32.21rpx;
	  font-weight: 400;
	}
	
	.txt {
	  opacity: 1;
	  line-height: 46.01rpx;
	  white-space: pre;
	  color: #67C23A;
	  font-family: MicrosoftYaHei, Microsoft YaHei;
	  font-size: 25.31rpx;
	  font-weight: normal;
	}
	
	.block {
	  display: flex;
	  position: relative;
	  align-items: center;
	  flex-direction: row;
	  margin-top: 16.1rpx;
	  height: 46.01rpx;
	}
	
	.desc {
	  opacity: 1;
	  line-height: 46.01rpx;
	  white-space: nowrap;
	  color: #15232e;
	  font-size: 25.31rpx;
	  font-weight: 400;
	  margin-right: 20rpx;
	}
	
	.side {
	  position: relative;
	  margin-top: 46.01rpx;
	  width: 16.1rpx;
	  height: 27.61rpx;
	}
</style>
